.PxToRem(@name, @px){
    @{name}: @px / 75 * 1rem;
}
.Flex{
    display:flex;
}
.line-height(@arg){.px2rem(line-height, @arg);}
.font-size(@arg){.px2rem(font-size, @arg);}
.font(@fz,@color){
    .px2rem(font-size,@fz);
    color: @color;
}
.border-bottom(@px,@xian,@color){
    .px2rem(border-bottom-width,@px);
    border-bottom-style: @xian;
    border-bottom-color: @color;
}
.border-top(@px,@xian,@color){
    .px2rem(border-top-width,@px);
    border-top-style: @xian;
    border-top-color: @color;
}
.border(@px,@xian,@color){.px2rem(border-width,@px);border-style: @xian; border-color: @color;}
.padding-top(@top){.px2rem(padding-top, @top);}
.padding-right(@right){.px2rem(padding-right, @right);}
.padding-bottom(@bottom){.px2rem(padding-bottom, @bottom);}
.padding-left(@left){.px2rem(padding-left, @left);}
.padding(@top,@right,@bottom,@left){
   .px2rem(padding-top,@top);
   .px2rem(padding-right,@right);
   .px2rem(padding-bottom,@bottom);
   .px2rem(padding-left,@left);
}
.margin-top(@top){.px2rem(margin-top, @top);}
.margin-right(@right){.px2rem(margin-right, @right);}
.margin-bottom(@bottom){.px2rem(margin-bottom, @bottom);}
.margin-left(@left){.px2rem(margin-left, @left);}
.margin(@top,@right,@bottom,@left){
   .px2rem(margin-top,@top);
   .px2rem(margin-right,@right);
   .px2rem(margin-bottom,@bottom);
   .px2rem(margin-left,@left);
}

header{
    background: url(../imgs/Reg_serve_bg01.jpg);
    .PxToRem(height,88);
    .PxToRem(font-size,40);
    .Flex;
    padding-left:2%;
    align-items:center;
      p{
        margin-left: 5%;
      }
      img{
        .PxToRem(width,55);
        .PxToRem(height,53);
      }
}

.account_cent{
        color:#ffffff;
        padding: 0 2%;
        .Flex;
        .PxToRem(height,450);
        background:#1cc6a3;
        article{flex:1;}
    .left{
        .one{
             .PxToRem(font-size,25);
             .PxToRem(margin-top,70);
        }
        .two{
            .PxToRem(font-size,80);
            .PxToRem(margin-top,50);
        }
        .three{
             .PxToRem(font-size,25);
             .PxToRem(margin-top,60);
        }
    }
    .right{
        p{
          .PxToRem(width,280);
          .PxToRem(height,90);
           background:#ff6600;
          .PxToRem(border-radius,50);
           text-align: center;
          .PxToRem(font-size,40);
          .PxToRem(line-height,90);
          .PxToRem(margin-top,140);
          .PxToRem(margin-left,20);
          
        }
    }
}
.account_change{
    .Flex;
    padding:3% 5%;
    border-bottom: 1px solid #ccc;
    justify-content:space-between;
      p{
          .PxToRem(font-size,40);
      }

      img{
          .PxToRem(width,47);
          .PxToRem(height,33);
      }
      img.chang{
          transform: rotate(180deg);
      }
      img.dong{
          animation: round 1s;
      }
      @keyframes round{
        0%{
          transform: rotate(0deg);
        }
        100%{
          transform: rotate(180deg);
        }
        
      }
}
.show{display:none ;}
.account_hide{
     position: relative;    
     .Flex;
     padding:3% 0;
     justify-content:space-around;
     border-bottom: 1px solid #ccc;
    .PxToRem(font-size,40);
    p{
      flex:1;
      text-align:center;
    }
    
    p.change{
       color:#1cc6a3;
      
    }
    ul{
      position:absolute;
      bottom: 0;
      width:100%;
      //li{width:20%;border-bottom: 5px solid #1cc6a3;}
    }
}


















